<template>
  <div class="container">
    <div class="head">
      <div class="title">首页</div>
      <div class="function">
        <img src="../../../static/appimg/showcase.png" alt @click="openLink(link)" />
        <img src="../../../static/appimg/extend.png" alt @click="posterModal = true" />
        <img src="../../../static/appimg/edit.png" alt @click="editShop" />
        <img src="../../../static/appimg/copy.png" alt @click="copy(link)" />
      </div>
    </div>
    <div class="data">
      <img src="../../../static/appimg/icons.png" alt />
      实时数据
    </div>
    <div class="model">
      <div class="order">
        <div style="font-size:12px;color:#787D85;position:absolute;left:10px;top:10px">提交订单</div>
        <div style="display:flex;padding-top:8px;width:60%">
          <div style="font-size:26px;color:#020C1D;font-weight:bold">{{info.allCount.count}}</div>
          <div style="margin-left:7px;">
            <div style="color:#CACED7;font-size:12px">近三天</div>
            <div style="color:#FC1E35;font-size:12px">{{info.allCount.inc}}</div>
          </div>
        </div>
        <div>
          <img src="../../../static/appimg/orderimg.png" alt style="height:55px;width:48px;" />
        </div>
      </div>
      <div class="order">
        <div style="font-size:12px;color:#787D85;position:absolute;left:10px;top:10px">审核通过</div>
        <div style="display:flex;padding-top:8px;width:60%">
          <div style="font-size:26px;color:#020C1D;font-weight:bold">{{info.passCount.count}}</div>
          <div style="margin-left:7px;">
            <div style="color:#CACED7;font-size:12px">近三天</div>
            <div style="color:#FC1E35;font-size:12px">{{info.passCount.inc}}</div>
          </div>
        </div>
        <div>
          <img src="../../../static/appimg/examineimg.png" alt style="height:50px;width:50px;" />
        </div>
      </div>
      <div class="order">
        <div style="font-size:12px;color:#787D85;position:absolute;left:10px;top:10px">生产发货</div>
        <div style="display:flex;padding-top:8px;width:60%">
          <div style="font-size:26px;color:#020C1D;font-weight:bold">{{info.produceCount.count}}</div>
          <div style="margin-left:7px;">
            <div style="color:#CACED7;font-size:12px">近三天</div>
            <div style="color:#FC1E35;font-size:12px">{{info.produceCount.inc}}</div>
          </div>
        </div>
        <div>
          <img src="../../../static/appimg/produceimg.png" alt style="height:50px;width:50px;" />
        </div>
      </div>
      <div class="order">
        <div style="font-size:12px;color:#787D85;position:absolute;left:10px;top:10px">生产失败</div>
        <div style="display:flex;padding-top:8px;width:60%">
          <div style="font-size:26px;color:#020C1D;font-weight:bold">{{info.failCount.count}}</div>
          <div style="margin-left:7px;">
            <div style="color:#CACED7;font-size:12px">近三天</div>
            <div style="color:#FC1E35;font-size:12px">{{info.failCount.inc}}</div>
          </div>
        </div>
        <div>
          <img src="../../../static/appimg/failimg.png" alt style="height:50px;width:50px;" />
        </div>
      </div>
    </div>
    <!-- echarts -->
    <div class="echarts">
      <div class="pic">
        <div id="main" style="width:100%; height:100%;"></div>
      </div>
    </div>
    <div class="footer_tabs">
      <footerApp />
    </div>
    <!-- 海报 -->
    <van-popup v-model="posterModal" :style="{ borderRadius:'10px',}">
      <div class="posterPic">
        <poster ref="canvas999" />
      </div>
    </van-popup>
  </div>
</template>
<script>
import footerApp from "../footerApp.vue";
import * as echarts from "echarts";
import poster from "../../components/canvas999.vue";
export default {
  components: { footerApp, echarts, poster },
  data() {
    return {
      info: {
        allCount: "",
        passCount: "",
        produceCount: "",
        failCount: ""
      },
      month: moment().format("YYYY-MM"),
      type: 1,
      eachartData: {
        count: "",
        data: "",
        time: ""
      },
      link: "",
      posterModal: false
    };
  },
  created() {
    this.getInfo();
    this.getData();
    /* 复制链接 */
    this.link = location.origin + "/h5/index";
  },
  mounted() {},
  methods: {
    getInfo() {
      axios.get("/own/order/count").then(response => {
        if (response.data.msg.code == 0) {
          this.info = response.data.data.data;
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    },
    editShop() {
      this.$router.push({
        path: "/page/weiShop"
      });
    },
    /* 打开页面 */
    openLink() {
      location.href = this.link;
    },
    /* 复制 */
    copy(t) {
      t = t.toString();
      var that = this;
      this.$copyText(t).then(res => {
        that.$message.success("复制成功");
      });
    },
    getEcharts() {
      var myChart = echarts.init(document.getElementById("main"));
      let x = [];
      let y = [
        {
          name: "发货数",
          type: "line",
          itemStyle: {
            color: "rgb(254, 61, 61)"
          },
          smooth: true,

          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(254, 61, 61, 0.1)"
              },
              {
                offset: 1,
                color: "rgba(254, 61, 61, 0)"
              }
            ])
          },
          data: []
        },
        {
          name: "发展订单数",
          type: "line",
          itemStyle: {
            color: "rgb(0, 90, 255)"
          },
          smooth: true,

          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 90, 255,0.9)"
              },
              {
                offset: 1,
                color: "rgba(0, 90, 255,0.1)"
              }
            ])
          },
          data: []
        }
      ];
      this.eachartData.data.forEach(item => {
        x.push(item.date);
        y[0].data.push(item.deliver_count);
        y[1].data.push(item.orders_count);
      });
      myChart.setOption({
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: ["发货数", "发展订单数"]
        },
        xAxis: {
          type: "category",
          data: x
        },
        yAxis: {
          type: "value"
        },
        grid: {
          left: "3%",
          right: "3%",
          top: "20%",
          bottom: "3%",
          containLabel: true
        },
        series: y
      });
    },
    getData() {
      axios.get("/own/week/count").then(response => {
        if (response.data.msg.code == 0) {
          this.eachartData = response.data.data;
          this.getEcharts();
        } else {
          this.$message.error(response.data.msg.info);
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f6f8fb;
  .head {
    width: 100%;
    height: 140px;
    background: white;
    padding: 15px;
    border-radius: 0 0 15px 15px;
    .title {
      font-size: 18px;
      font-weight: bold;
    }
    .function {
      font-size: 18px;
      display: flex;
      justify-content: space-between;
      padding-top: 20px;
      img {
        width: 75px;
        height: 75px;
      }
    }
  }
  .data {
    width: 100%;
    font-size: 16px;
    font-weight: bold;
    margin-top: 20px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    img {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }
  .model {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;

    .order {
      width: 45%;
      height: 78px;
      background: white;
      border-radius: 12px;
      margin-top: 15px;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      position: relative;
    }
  }
  .echarts {
    width: 100%;
    padding: 15px;
    .pic {
      height: 213px;
      width: 100%;
      background: white;
      border-radius: 10px;
      padding: 10px;
    }
  }
  .footer_tabs {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
  }
}
</style>